<template>
	<div class="app-container">
		<div class="app-box">
			<div class="view-top">
				<el-row>
				  <el-col :span="9">
				  	<div class="top1">
				  		<p>企业账户余额</p>
				  		<p class="topP" v-loading="loading">{{money | moneydou}} <span>元</span></p>
				  		<p>
				  			<el-button type='primary' size='mini' @click="toFull">充　值</el-button>
				  			<!--<span class="topSpan" @click="route1">企业账单</span>-->
				  			<router-link class="topSpan" :to="{name:'detail'}">企业账单</router-link>
				  		</p>
				  	</div>
				  </el-col>
				  <el-col :span="9">
				  	<div class="top2">
				  		<p>平台未提现余额</p>
				  		<p class="topP" v-loading="loading2">{{money2 | moneydou}} <span>元</span></p>
				  		<p>
				  			<!--<el-button size='mini'>11</el-button>-->
				  			<!--<span class="topSpan" style="line-height: 30px;" @click="route2">出单明细</span>-->
				  			<router-link class="topSpan" style="line-height: 30px;" :to="{name:'outgold'}">出金明细</router-link>
				  		</p>
				  	</div>
				  </el-col>
				  <el-col :span="6">
				  	<div class="top3">
				  		<el-button type='primary' size='small' @click="gopay"><i class="iconfont icon-yongjin" style="margin-right: 8px;"></i>佣金发放</el-button>
				  		<p style="margin-top: 15px !important;">
				  			<!--<span class="topSpan" @click="route3">发放明细</span>-->
				  			<router-link class="topSpan" :to="{name:'putout'}">发放明细</router-link>
				  		</p>
				  	</div>
				  </el-col>
				</el-row>
			</div>
			<div class="view-middle">
				<el-row>
				  <el-col :span="12">
				  	<div class="middle" style="margin-left: 0;">
				  		<p class="mileftP" style="background: #FAFAFA;">
				  			<span class="left-span">用户总览（人）</span>
				  		</p>
				  		<p class="mileftP">
				  			<span class="left-span">薪金宝总用户数</span>
				  			<span class="right-span">{{info.allUsers}}</span>
				  		</p>
				  		<p class="mileftP">
				  			<span class="left-span">昨日注册用户数</span>
				  			<span class="right-span">{{info.yesRegUsers}}</span>
				  		</p>
				  		<p class="mileftP">
				  			<span class="left-span">本周注册用户数</span>
				  			<span class="right-span">{{info.weekRegUsers}}</span>
				  		</p>
				  		<p class="mileftP">
				  			<span class="left-span">本月注册用户数</span>
				  			<span class="right-span">{{info.monthRegUsers}}</span>
				  		</p>
				  	</div>
				  </el-col>
				  <el-col :span="12">
				  	<div class="middle" style="margin-right: 0;">
				  		<p class="mileftP" style="background: #FAFAFA;">
				  			<span class="left-span">提现打款总览（元）</span>
				  		</p>
				  		<p class="mileftP">
				  			<span class="left-span">昨日提现打款总数</span>
				  			<span class="right-span">{{info.yesCost | moneydou}}</span>
				  		</p>
				  		<p class="mileftP">
				  			<span class="left-span">本周提现打款总数</span>
				  			<span class="right-span">{{info.weekCost | moneydou}}</span>
				  		</p>
				  		<p class="mileftP">
				  			<span class="left-span">本月提现打款总数</span>
				  			<span class="right-span">{{info.monthCost | moneydou}}</span>
				  		</p>
				  		<p class="mileftP">
				  			<span class="left-span">本年提现打款总数</span>
				  			<span class="right-span">{{info.yearCost | moneydou}}</span>
				  		</p>
				  	</div>
				  </el-col>
				</el-row>
			</div>
			<div class="view-protocol">
				<el-row>
				  <el-col :span="24"><div class="view-bottoms">
				  	<p class="view-bottoms-p">
				  		<span class="pointer">·</span>
				  		<span class="title">用户协议</span>
				  		<span class="int">用户注册时，只有同意用户协议后才能正常注册成功，用于避免用户的各种纠纷</span>
				  		<!--<a @click="goagree">编辑协议</a>-->
				  		<router-link class="" :to="{name:'payagree'}">编辑</router-link>
				  	</p>
				  </div></el-col>
				</el-row>
			</div>
			<div class="view-password">
				<el-row>
				  <el-col :span="24"><div class="view-bottoms">
				  	<p class="view-bottoms-p">
				  		<span class="pointer">·</span>
				  		<span class="title">支付密码</span>
				  		<span class="int">设置支付密码后才能正常的发放佣金和入金充值</span>
				  		<!--<a @click="gopwd">设置支付密码</a>-->
				  		<router-link class="" :to="{name:'paysetpwd'}">设置</router-link>
				  	</p>
				  </div></el-col>
				</el-row>
			</div>
			
			<div class="view-password">
				<el-row>
				  <el-col :span="24"><div class="view-bottoms">
				  	<p class="view-bottoms-p">
				  		<span class="pointer">·</span>
				  		<span class="title">短信通知</span>
				  		<span class="int">打开此功能后，转账及打款成功后，会短信通知收款人</span>
				  		<a>
				  		  <el-switch
						    v-model='value5'
						    active-color="#13ce66"
						    inactive-color="#cccccc"
						    @change="noticeChange">
						  </el-switch>
				  		</a>
				  	</p>
				  </div></el-col>
				</el-row>
			</div>
			
			<div class="view-password">
				<el-row>
				  <el-col :span="24"><div class="view-bottoms">
				  	<p class="view-bottoms-p">
				  		<span class="pointer">·</span>
				  		<span class="title">扣税设置</span>
				  		<span class="int">提现、打款时，扣除个人所得税的相关设置</span>
				  		<a @click="dialogTableVisible=true">详情</a>
				  	</p>
				  </div></el-col>
				</el-row>
			</div>
			
			
			
			<el-dialog title="充值" :visible.sync="dialogFormVisible" class="payoverview-dialogWp" :close-on-click-modal='false' @close="cleardia">
			  
			  <el-form :model="form" :rules="rules" ref="form" label-width="120px" class="demo-ruleForm">
			  	<el-form-item label="企业一般户余额：">
			      <div class="intwp">
			      	<p style="padding: 0;margin: 0;display: inline-block;" v-loading="loading3">{{money3 | moneydou}} 元</p>
			      </div>
			    </el-form-item>
			    <el-form-item label="充值金额：" class="is-required" prop='money'>
			      <div class="intwp">
			      	<el-input v-model="form.money" auto-complete="off" size='mini' class='moneyint' @blur="clearNoNums(form.money)"></el-input><span>&nbsp;&nbsp;元</span>
			      </div>
			    </el-form-item>
			    <el-form-item label="备注：" class="is-required" prop='remark'>
			      <div class="intwp">
			      	<el-input v-model="form.remark" auto-complete="off" size='mini' type='textarea'></el-input>
			      </div>
			    </el-form-item>
			    <el-form-item label="支付密码：" class="is-required" prop='payPassword'>
			      <div class="intwp">
			      	<el-input type="password" v-model="form.payPassword" auto-complete="off" size='mini' name="zhifumima" id="zhifumima" autocomplete="111"></el-input>
			      </div>
			    </el-form-item>
			    <el-form-item label="短信验证码：" class="is-required payoverview_codeintwp" prop='code'>
			      <div class="intwp">
			      	<el-input v-model="form.code" auto-complete="off" size='mini' class='codeint'></el-input>
			      	<el-button @click='getnumber2' :disabled="!show" size='mini'>
                      <span v-show="show">获取验证码</span>
                      <span v-show="!show" class="count">{{count}} s</span>
                    </el-button>
			      </div>
            <div class="z-errorbox">
			      <p class="z-error phonecode">请使用手机{{phoneNumber | hideMiddle}}获取验证码</p>
            </div>
			    </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <!--<el-button @click="dialogFormVisible = false" size='small'>取 消</el-button>-->
			    <el-button type="primary" @click="submitgo('form')" size='small' :loading="btnloading">确 定</el-button>
			  </div>
			</el-dialog>
			
			
			<el-dialog title="个人所得税税率表" :visible.sync="dialogTableVisible" :close-on-click-modal="false" width="600px">
			  <el-table :data="diaData" stripe>
			    <el-table-column property="grade" label="级数" width="100"></el-table-column>
			    <el-table-column property="should" label="应纳税所得额" width="220px"></el-table-column>
			    <el-table-column property="pert" label="税率（%）"></el-table-column>
			    <el-table-column property="num" label="速算扣除数" align="right">
			    	<template slot-scope='scope'>
			    		{{scope.row.num | moneydou}}
			    	</template>
			    </el-table-column>
			  </el-table>
			  <div slot="footer" class="dialog-footer dialog-footer2">
			    <el-button type="primary" @click="dialogTableVisible = false" size="small">确 定</el-button>
			  </div>
			</el-dialog>
			
			
			
		</div>
	</div>
</template>

<script>
import Vue from "vue";
const TIME_COUNT = 60;
export default {
  data() {
    return {
      money: "-",
      money2: "-",
      money3: "-",
      loading: false,
      loading2: false,
      loading3: false,
      info: {
        enterpriseBalance: "-",
        platFormNotputBalance: "-",
        allUsers: "-",
        yesRegUsers: "-",
        weekRegUsers: "-",
        monthRegUsers: "-",
        yesCost: "-",
        weekCost: "-",
        monthCost: "-",
        yearCost: "-"
      },
      btnloading: false,
      phoneNumber: "",
      balance: "-", //企业一般户余额
      dialogFormVisible: false,
      form: {
        money: "",
        code: "",
        payPassword: "",
        remark: "",
        securitycode: null //安全码
      },
      rules: {
        money: [{ required: true, message: "请输入充值金额", trigger: "blur" }],
        code: [
          { required: true, message: "请输入手机验证码", trigger: "blur" }
        ],
        payPassword: [
          { required: true, message: "请输入支付密码", trigger: "blur" }
        ],
        remark: [
          {
            required: true,
            message: "请输入备注",
            trigger: "blur"
          },
          {
            max: 20,
            message: "备注不能超过20个字",
            trigger: "blur"
          }
        ]
      },
      show: true,
      count: "",
      timer: null,
      toFull: this.tofull,
      gopay: this.goPay,
      value5: "true",
      diaData: [
        {
          grade: 1,
          should: "不超过3,000元的部分",
          pert: 3,
          num: 0
        },
        {
          grade: 2,
          should: "超过3,000元至12,000元的部分",
          pert: 10,
          num: 210
        },
        {
          grade: 3,
          should: "超过12,000元至25,000元的部分",
          pert: 20,
          num: 1410
        },
        {
          grade: 4,
          should: "超过25,000元至35,000元的部分",
          pert: 25,
          num: 2660
        },
        {
          grade: 5,
          should: "超过35,000元至55,000元的部分",
          pert: 30,
          num: 4410
        },
        {
          grade: 6,
          should: "超过55,000元至80,000元的部分",
          pert: 35,
          num: 7160
        },
        {
          grade: 7,
          should: "超过80,000元的部分",
          pert: 45,
          num: 15160
        }
      ],
      dialogTableVisible: false
    };
  },
  mounted() {
    this.pasOr();
    this.getBalance();
    this.getinfo();
  },
  filters: {
    moneydou(val) {
      if (val != "-") {
        val = val.toString().replace(/\$|\,/g, "");
        if (isNaN(val)) {
          val = "0";
        }
        let sign = val == (val = Math.abs(val));
        val = Math.floor(val * 100 + 0.50000000001);
        let cents = val % 100;
        val = Math.floor(val / 100).toString();
        if (cents < 10) {
          cents = "0" + cents;
        }
        for (var i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
          val =
            val.substring(0, val.length - (4 * i + 3)) +
            "," +
            val.substring(val.length - (4 * i + 3));
        }

        return (sign ? "" : "-") + val + "." + cents;
      } else {
        return val;
      }
    },

    hideMiddle(val) {
      if (val && val != "") {
        return `${val.substring(0, 3)}****${val.substring(val.length - 4)}`;
      }
    }
  },
  methods: {
    getinfo() {
      this.loading = true;
      this.loading2 = true;
      let params = {};
      this.post(params, "services/app/applets/SummaryInfo").then(res => {
        if (res.success) {
          this.info = res.result;
        }
      });

      //企业账户余额
      this.post(params, "services/app/applets/SubAccountBalance").then(res => {
        if (res.success) {
          this.money = res.result.money;
          this.loading = false;
        }
      });

      //平台未提现余额
      this.post(params, "services/app/applets/AccountTotalMoney").then(res => {
        if (res.success) {
          this.money2 = res.result.money;
          this.loading2 = false;
        }
      });
    },

    pasOr() {
      let params = {};
      this.post(params, "services/app/applets/CheckEnterpriseSetPwd").then(
        res => {
          if (res.success) {
            if (res.result.hadPwd == false) {
              this.toFull = this.tofull2;
              this.gopay = this.tofull2;
            } else {
              this.toFull = this.tofull;
              this.gopay = this.goPay;
            }
          }
        }
      );
    },
    clearNoNums(obj) {
      obj = obj.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
      obj = obj.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      obj = obj
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      obj = obj.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
      if (obj.indexOf(".") < 0 && obj != "") {
        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        obj = parseFloat(obj);
      }
      if (obj == "") {
        obj = 0;
      }
      this.form.money = obj;
      console.log(obj);
      return obj;
    },
    getBalance() {
      let params = {};
      this.post(params, "services/app/applets/AdminInfo").then(rs => {
        if (rs.success) {
          this.balance = rs.result.balance;
          this.phoneNumber = rs.result.smsPhoneNumber;
          this.value5 = rs.result.isSmsNotify;
        }
      });
    },
    getBalance2() {
      this.loading3 = true;
      let params = {};
      //弹框余额
      this.post(params, "services/app/applets/AccountBalance").then(res => {
        if (res.success) {
          this.money3 = res.result.money;
          this.loading3 = false;
        }
      });
    },
    getnumber2() {
      console.log(this.show);
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.getnumber3();
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    //第一个验证码发送
    getnumber3() {
      let params = {};
      this.post(params, "services/app/applets/SendSMSCodePC").then(rs => {
        if (rs.success) {
          this.form.securitycode = rs.result.securityCode;
          this.$message({
            message: "验证码已发送，请注意查收",
            type: "success"
          });
        }
      });
    },
    submitgo(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let params = this.form;
          this.btnloading = true;
          this.post(params, "services/app/applets/UserRecharge").then(res => {
            if (res.success) {
              this.dialogFormVisible = false;
              this.succeeNot();
              this.btnloading = false;
              this.cleardia();
              this.getinfo();
              //this.getBalance2();
            } else {
              this.btnloading = false;
              let err = res.error.message;
              this.$alert(err, {
                confirmButtonText: "确定",
                type: "warning"
              });
              //this.failNot(res.error.message);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    tofull() {
      this.getBalance2();
      this.dialogFormVisible = true;
    },
    tofull2() {
      this.$confirm("您还没有设置支付密码，是否设置?", "提示", {
        confirmButtonText: "马上设置",
        cancelButtonText: "以后再说",
        type: "warning",
        closeOnClickModal: false,
      })
        .then(() => {
          this.$router.push({
            name: "paysetpwd",
            query: {}
          });
        })
        .catch(() => {
          console.log("catch");
        });
    },
    gopwd() {
      this.$router.push({
        name: "paysetpwd",
        query: {}
      });
    },
    goagree() {
      this.$router.push({
        name: "payagree",
        query: {}
      });
    },
    cleardia() {
      this.$refs["form"].resetFields();
      this.count = 0;
    },

    //保存成功提示
    succeeNot() {
      const h = this.$createElement;
      this.$notify({
        title: "成功",
        message: "充值成功",
        type: "success",
        customClass: "el-notification-success"
      });
    },
    //保存失败提示
    failNot(mes) {
      //	    	const h = this.$createElement;
      //	      	this.$notify.error({
      //	          title: '错误',
      //	          message: mes,
      //	          //duration: 0,
      //	          customClass:"el-notification-error"
      //	        });
    },

    route1() {
      this.$router.push({
        name: "detail"
      });
    },
    route2() {
      this.$router.push({
        name: "outgold"
      });
    },
    route3() {
      this.$router.push({
        name: "putout"
      });
    },
    goPay() {
      this.$router.push({
        name: "manageIndex"
      });
    },
    noticeChange(val) {
      console.log(val);
      var txt;
      if (val == true) {
        txt = "确定要开启短信通知吗?";
      } else {
        txt = "确定要关闭短信通知吗?";
      }
      this.$confirm(txt, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        center: true,
      })
        .then(() => {
          //this.value5=!this.value5
          let params = {};
          this.post(params, "services/app/applets/SetSmsNotify").then(
            res => {}
          );
        })
        .catch(() => {
          this.value5 = !this.value5;
          console.log("catch");
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.app-box {
  font-size: 14px;
  .view-top {
    background: rgba(232, 232, 232, 0.2);
    border: 1px solid #ddd;
    border-radius: 5px;
    .top1,
    .top2 {
      border-right: 1px solid #ddd;
      padding: 18px 50px;
      p:first-child {
        font-size: 16px;
        color: #333333;
        margin-bottom: 10px;
        margin-top: 0;
      }
      .topP {
        display: inline-block;
        font-size: 24px;
        color: #333333;
        margin-bottom: 18px;
        margin-top: 0;
        span {
          font-size: 13px;
        }
      }
      p:last-child {
        margin: 0;
      }
      .topSpan {
        cursor: pointer;
        font-size: 14px;
        color: #027dca;
        margin-left: 4px;
      }
    }
    .top3 {
      padding-top: 39px;
      text-align: center;
      .topSpan {
        cursor: pointer;
        font-size: 14px;
        color: #027dca;
        margin-left: 4px;
      }
    }
  }
  .view-middle {
    margin-top: 30px;
    .middle {
      border: 1px solid #d9d9d9;
      margin: 0 15px;
      border-bottom: 0;
      .mileftP {
        margin: 0;
        padding: 0 20px;
        line-height: 40px;
        border-bottom: 1px solid #d9d9d9;
        font-size: 14px;
        color: #333333;
        .left-span {
        }
        .right-span {
          float: right;
          font-weight: bold;
          font-size: 16px;
        }
      }
    }
  }
  .view-protocol,
  .view-password {
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-top: 30px;
  }
  .view-bottoms {
    height: 62px;
    line-height: 26px;
    .view-bottoms-p {
      margin: 0;
      padding: 0 20px;
      line-height: 62px;
      .pointer {
        color: #ff7819;
        font-size: 40px;
        float: left;
        margin-right: 6px;
        position: relative;
        top: -2px;
      }
      .title {
        float: left;
        color: #333333;
        font-size: 16px;
        margin-right: 10px;
        font-weight: bold;
      }
      .int {
        letter-spacing: 0.67px;
        position: relative;
        top: 1px;
      }
      a {
        color: #027dca;
        float: right;
        letter-spacing: 0.62px;
        position: relative;
        top: 1px;
      }
    }
  }

  a {
    color: #027dca;
  }
  .intwp {
    width: 300px;
  }
  .moneyint {
    width: 200px;
  }
  .codeint {
    width: 186px;
    margin-right: 10px;
  }
  .dialog-footer {
    text-align: center;
    //margin-top: -50px;
  }
  .dialog-footer2 {
    text-align: center;
    margin-top: -20px;
  }

}
.phonecode{
  color: #999999;font-size: 12px;
}

</style>
<style type="text/css">
.payoverview-dialogWp .el-dialog {
  width: 500px !important;
}
/* .payoverview_codeintwp .el-form-item__error {
  top: 50px;
} */
</style>
